<template>
  <div id="personal-contract">
    <div class="contract-box">
      <NavBar title="合约持仓" left-arrow @click-left="onClickLeft" />
      <div class="contract-body">
        <Tabs v-model="active" color="blue" @click="tabsclick">
          <PullRefresh v-model="isLoading" @refresh="onRefresh">
            <Tab title="在持">在持</Tab>
            <Tab title="未成交">未成交</Tab>
            <Tab title="已成交">已成交</Tab>
            <Tab title="已平仓">
              <div class="close-box">
                <div class="boxmini">
                  <div class="boxleft">订单号</div>
                  <div class="boxright">B111111112266666666666222222</div>
                </div>
                <div class="boxmini">
                  <div class="boxleft">交易品种</div>
                  <div class="boxright">BTC/USDT</div>
                </div>
                <div class="boxmini">
                  <div class="boxleft">交易方向</div>
                  <div class="boxright">买多</div>
                </div>
                <div class="boxmini">
                  <div class="boxleft">开仓数量(手数)</div>
                  <div class="boxright">5</div>
                </div>
                <div class="boxmini">
                  <div class="boxleft">开仓价</div>
                  <div class="boxright">6355646</div>
                </div>
                <div class="boxmini">
                  <div class="boxleft">平仓价</div>
                  <div class="boxright">6546465</div>
                </div>
                <div class="boxmini">
                  <div class="boxleft">止损价</div>
                  <div class="boxright">0</div>
                </div>
                <div class="boxmini">
                  <div class="boxleft">止盈价</div>
                  <div class="boxright">0</div>
                </div>
                <div class="boxmini">
                  <div class="boxleft">实际收益</div>
                  <div class="boxright">-386.3</div>
                </div>
                <div class="boxmini">
                  <div class="boxleft">当前价格</div>
                  <div class="boxright">54665.54</div>
                </div>
                <div class="boxmini">
                  <div class="boxleft">成交金额</div>
                  <div class="boxright">68464.540000000</div>
                </div>
              </div>
            </Tab>
            <Tab title="已撤单">已撤单</Tab>
            <Tab title="已锁仓">
              <div class="lock-box">
                <div class="boxmini">
                  <div class="boxleft">订单号</div>
                  <div class="boxright">B111111112266666666666222222</div>
                </div>
                <div class="boxmini">
                  <div class="boxleft">交易品种</div>
                  <div class="boxright">BTC/USDT</div>
                </div>
                <div class="boxmini">
                  <div class="boxleft">交易方向</div>
                  <div class="boxright">买多</div>
                </div>
                <div class="boxmini">
                  <div class="boxleft">开仓数量(手数)</div>
                  <div class="boxright">5</div>
                </div>
                <div class="boxmini">
                  <div class="boxleft">开仓价</div>
                  <div class="boxright">6355646</div>
                </div>
                <div class="boxmini">
                  <div class="boxleft">平仓价</div>
                  <div class="boxright">6546465</div>
                </div>
                <div class="boxmini">
                  <div class="boxleft">止损价</div>
                  <div class="boxright">0</div>
                </div>
                <div class="boxmini">
                  <div class="boxleft">止盈价</div>
                  <div class="boxright">0</div>
                </div>
                <div class="boxmini">
                  <div class="boxleft">实际收益</div>
                  <div class="boxright">-386.3</div>
                </div>
                <div class="boxmini">
                  <div class="boxleft">当前价格</div>
                  <div class="boxright">54665.54</div>
                </div>
                <div class="boxmini">
                  <div class="boxleft">成交金额</div>
                  <div class="boxright">68464.540000000</div>
                </div>
              </div>
            </Tab>
          </PullRefresh>
        </Tabs>
      </div>
    </div>
  </div>
</template>
<script>
import { NavBar, Tabs, Tab, PullRefresh, Toast } from "vant";
export default {
  components: {
    NavBar,
    Tab,
    Tabs,
    PullRefresh,
    Toast,
  },

  data() {
    return {
      active: 0,
      isLoading: false,
    };
  },

  // 创建时
  created() {},

  // 方法
  methods: {
    // 点击切换标签页
    tabsclick() {
      Toast.loading({
        message: "Loading...",
        forbidClick: true,
      });
    },

    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
      }, 1000);
    },

    // 跳出
    onClickLeft() {
      console.log("跳出");
      this.$router.go(-1);
    },

    // 网络请求
  },
};
</script>
<style lang="less" scoped>
html {
  background-color: red;
}
#personal-contract {
  width: 100vw;
  height: 100vh;
  background-color: #f7f6fb;
  .contract-box {
    .contract-body {
      margin: auto;
      /deep/.van-tabs__wrap--scrollable .van-tab {
        padding: 0px;
      }
      /deep/.van-tab {
        font-size: 12px;
      }
      .close-box {
        width: 335px;
        background-color: white;
        margin: 20px 10px;
        padding: 12px 10px;
        font-size: 13px;
        border-radius: 10px;
        .boxmini {
          display: flex;
          justify-content: space-between;
          .boxleft {
            color: #8d9dbc;
            line-height: 1.8;
          }
          .boxright {
            color: #303133;
          }
        }
      }
      .lock-box {
        width: 335px;
        background-color: white;
        margin: 20px 10px;
        padding: 12px 10px;
        font-size: 13px;
        border-radius: 10px;
        .boxmini {
          display: flex;
          justify-content: space-between;
          .boxleft {
            color: #8d9dbc;
            line-height: 1.8;
          }
          .boxright {
            color: #303133;
          }
        }
      }
    }
  }
}
</style>
